<template>
	<div class="contentSche">
        <FullCalendar class="fullCalendar" ref="fullCalendar" :options="calendarOptions" />
        <el-dialog :visible.sync="dialogFormVisible"  :title="title" width="700px" @close='uploadClose'  
          style="z-index:9999">
          <el-form ref="form" :model="form" :rules="rules" label-width="110px">
            <el-form-item label="开始时间" prop="startTime">
              <el-date-picker
                v-model="form.startTime"
                type="datetime"
                value-format="timestamp"
                :picker-options="pickerOptionsStart"
                placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间" prop="endTime">
              <el-date-picker
                v-model="form.endTime"
                value-format="timestamp"
                type="datetime"
                :picker-options="pickerOptionsEnd"
                placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="记录内容" prop="remindContent">
              <el-input
                type="textarea"
                :rows="3"
                placeholder="记录你将要做的一件事..."
                v-model="form.remindContent">
              </el-input>
            </el-form-item>
            <el-form-item label="提醒设置" prop="remindSet">
               <el-input-number v-model="form.remindSet" controls-position="right"  :min="1" :max="10"></el-input-number>
            </el-form-item>
            <el-form-item label="标签颜色" prop="backgroundColor">
              <el-color-picker v-model="form.backgroundColor"></el-color-picker>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="uploadClose">取 消</el-button>
            <el-button type="danger" @click="delDateBtn" v-show="add =='edit'">删 除</el-button>
            <el-button type="primary" @click="addDate">确 定</el-button>
          </div>
        </el-dialog>
    </div>
</template>


<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
import timeGridPlugin from '@fullcalendar/timegrid'
import { getDateList, creatDate, delDate, update} from "@/api/system/oa";

export default {
  components: {
    FullCalendar  // 像使用自定义组件一样使用
  },
  data() {
    return {
      title: '添加日程',
      add: "new",
     	  // 开始结束日期限制
      pickerOptionsStart: {
          disabledDate: (time) => {
          if (this.form.endTime) {
              return (
              time.getTime() >= new Date(this.form.endTime).getTime()
              );
          }
          }
      },
      // 结束日期限制
      pickerOptionsEnd: {
          disabledDate: (time) => {
            let beginDateVal = new Date(this.form.startTime).getTime()
          if (beginDateVal) { // 等于的时候是临界值00:00:00
            return (time.getTime()) <= beginDateVal - 8.64e7
          }else{
             return (
              time.getTime() <= new Date(this.form.startTime).getTime()
              );
            }
          }
      },
      form: {
          remindSet: 1
      },
      rules: {
          startTime: [{ required: true, message: "请选择开始时间", trigger: "blur" }],
          endTime: [{ required: true, message: "请选择结束时间", trigger: "blur" },{
                  type: 'string',
                  required: true,
                  trigger: 'blur',
                  validator: this.validateEndTime,
              }],
          remindContent: [{ required: true, message: "请输入记录内容", trigger: "blur" }],
          backgroundColor: [{ required: true, message: "请选择颜色", trigger: "blur" }],
          remindSet: [{ required: true, message: "请输入提醒设置", trigger: "blur" }],
      },
      calendarApi: null,
      dialogFormVisible: false,
      calendarOptions: {
        plugins: [ dayGridPlugin, interactionPlugin, timeGridPlugin ], // 需要用哪个插件引入后放到这个数组里
        initialDate: new Date(), // 日历第一次加载时显示的初始日期。可以解析为Date的任何职包括ISO8601日期字符串，例如"2014-02-01"。
        initialView: 'dayGridMonth', // 日历加载时的初始视图，默认值为'dayGridMonth'，可以为任何可用视图的值，如例如'dayGridWeek'，'timeGridDay'，'listWeek'
        locale: 'zh-cn', // 设置日历的语言，中文为 “zh-cn”
        firstDay: '1', // 设置每周的第一天，默认值取决于当前语言环境，该值为代表星期几的数字，且值必须为整数，星期日=0
        weekNumberCalculation: 'ISO', // 指定"ISO"结果为ISO8601周数。指定"ISO"将firstDay的默认值更改为1（Monday）
         // 当事件过多时是否隐藏
        dayMaxEvents: true,
        buttonText: { // 文本将显示在headerToolbar / footerToolbar的按钮上。不支持HTML注入。所有特殊字符将被转义。
          today: '今天',
          month: '月',
          week: '周',
          day: '日',
        },
        headerToolbar: { // 在日历顶部定义按钮和标题。将headerToolbar选项设置为false不会显示任何标题工具栏。可以为对象提供属性start/center/end或left/center/right。这些属性包含带有逗号/空格分隔值的字符串。用逗号分隔的值将相邻显示。用空格分隔的值之间会显示一个很小的间隙。
          left: 'today prev,next',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        eventTimeFormat: { // 在每个事件上显示的时间的格式
          hour: 'numeric',
          minute: '2-digit',
          hour12: false
        },
        events:[
            // { // 将在日历上显示的事件对象， events 可以是数组、json、函数。具体可以查看官方文档
            //     title: '标题',
            //     start: '事件开始事件',
            //     end: '事件结束事件' ,// 这里要注意，end为可选参数，无end参数时该事件仅在当天展示
            //     backgroundColor: '#fff', // 该事件的背景颜色
            //     borderColor: '#FDEBC9', // 该事件的边框颜色
            //     textColor: '#F9AE26' // 该事件的文字颜色
            // }
        ],
        customButtons: { // 定义可在headerToolbar / footerToolbar中使用的自定义按钮
          today: {
            text: '今天', // 按钮的展示文本
            click: this.todayClick // 点击按钮触发的事件，这里要注意的是当按钮绑定了事件之后该按钮原本自带的事件将会失效
          },
          next: {
            click: this.nextClick
          },
          prev: {
            click: this.prevClick
          }
        },
        eventClick: this.handleDateClick, // 点击事件时，触发该回调
        eventMouseEnter: this.handleMouseEnter, // 鼠标悬停在事件上时，触发该回调
        eventMouseLeave: this.handleMouseLeave, // 鼠标移除时，触发该回调
        dateClick: this.dateClick, // 当用户单击日期或时间时,触发该回调，触发此回调，您必须加载interaction插件
        height: 700, // 日历高度
      },
      firstTime: '',
      lastTime: ''
    }
  },
  mounted() {
    // 这里有两点要注意，想要调用插件的方法，要在组件上设置ref
    // 并且在组件未加载的时候this.$refs中是没有fullCalendar的，所以未加载的时候调用方法会报错
    this.calendarApi = this.$refs.fullCalendar.getApi()  
    this.getEventsList()
  },
  methods: {
    validateEndTime(rule, value, callback) {
        if (value === '') {
            callback(new Error('请选择结束时间'))
        } else {
            if (
            new Date(this.form.startTime).getTime() >=
            new Date(this.form.endTime).getTime()
            ) {
            callback(new Error('结束时间必须大于开始时间！'))
            } else {
            callback()
            }
        }
    },
    getEventsList() {
      const data ={
        startTime: Date.parse(new Date(this.calendarApi.view.activeStart)),
        endTime: Date.parse(new Date(this.calendarApi.view.activeEnd))
      }
      getDateList(data).then((res) => {
        if(res.code === 0){
            this.calendarOptions.events = []
            res.data.map((item) => {
              let obj = {
                    id: item.id,
                    title: item.remindContent,
                    start: item.startTime,
                    end: item.endTime,
                    textColor: '#fff',
                    borderColor: item.backgroundColor,
                    backgroundColor: item.backgroundColor,
                    remindSet: item.remindSet
                };
                this.calendarOptions.events.push(obj)
            })
        }
      })
    },
    delDateBtn() {
      const id = this.form.id;
      this.$modal.confirm('确定删除该计划吗?').then(function() {
          return delDate(id);
          }).then(() => {
            this.$modal.msgSuccess("删除成功");
            this.dialogFormVisible = false
            this.getEventsList();
      }).catch(() => {});
    },
    uploadClose() {
      this.dialogFormVisible = false
      this.form = {}
    },
    addDate() {
      this.$refs["form"].validate(valid => {
         if (!valid) {
          return;
        }
        this.form.sendTime = this.form.startTime
        if(this.add == 'new'){  // 新增
          creatDate(this.form).then((res)=> {
            if(res.code === 0){
               this.$modal.msgSuccess("新增成功");
                this.dialogFormVisible = false
                this.getEventsList();
            }
          })

        }else{ //编辑
          update(this.form).then((res) => {
            if(res.code === 0){
                this.$modal.msgSuccess("修改成功");
                this.dialogFormVisible = false
                this.getEventsList();
            }
          })

        }
      })
    },
    dateClick(date) {
     this.dialogFormVisible = true;
     this.add = 'new'
     this.title = '添加日程'
     this.$set(this.form, "startTime", new Date());
     this.form.startTime =  Date.parse(new Date(date.date))
     this.form.remindSet = 1
    },
    handleDateClick(dateClickInfo,jsEvent, view) {
      this.add = 'edit'
      this.title = '修改日程'
        // 显示添加弹出框
      this.dialogFormVisible = true;
      let editData = this.calendarOptions.events.filter((_) => _.id == dateClickInfo.event.id)
      const data = {
        remindContent :dateClickInfo.event.title,
        startTime :dateClickInfo.event.start,
        endTime :dateClickInfo.event.end,
        backgroundColor :dateClickInfo.event.backgroundColor,
        remindSet: editData && editData[0].remindSet
      }
      // 把当前点击的数据保留
      this.form = data
      this.form.id = dateClickInfo.event.id
    },
    todayClick(mouseEvent, htmlElement) {
      this.calendarApi.today() // 将日历移动到当前日期。
      this.calendarApi.getDate() // 返回日期的日历的当前日期
      this.getEventsList()
    },
    nextClick(mouseEvent, htmlElement) {
      this.calendarApi.next() // 将日历向前移动一步（例如，一个月或一周）。
      // 如果dayGridMonth查看日历，则将日历向前移动一个月。
      // 如果日历位于dayGridWeek或中timeGridWeek，则将日历向前移动一周。
      // 如果日历位于dayGridDay或中timeGridDay，则将日历向前移动一天。
      this.getEventsList()
    },
    prevClick(mouseEvent, htmlElement) {
      this.calendarApi.prev()// 将日历后退一步（例如，一个月或一周）。
      // 如果dayGridMonth查看日历，则将日历后移一个月。
      // 如果日历位于dayGridWeek或中timeGridWeek，则将日历后移一周。
      // 如果日历位于dayGridDay或中timeGridDay，则将日历移回一天。
      this.getEventsList()
    }
  }
}
</script>
<style lang="scss">
  .contentSche { 
      padding: 20px; 
  }
.fc .fc-popover{
  z-index: 999 !important;
}
</style>